import {
    Form,
    Input,
    Button,
} from 'antd-mobile'
import { useNavigate } from 'react-router-dom'

import { apiLogin } from '../../api'



const Login = () => {

    const navigate = useNavigate()



    const onFinish = (value: any) => {
        apiLogin(value).then((res:any) => {

            // 将login 保存到本地
            localStorage.setItem('token', res.token)
            
            // 跳转页面
            navigate('/')
        })
    }
    return <div>
        <Form
            layout='horizontal'
            onFinish={(value) => onFinish(value)}
            footer={
                <Button block type='submit' color='primary'>
                    提交
                </Button>
            }
        >
            <Form.Item
                name='username'
                label='用户名'
                rules={[{ required: true, message: '姓名不能为空' }]}
            >
                <Input placeholder='请输入姓名' />
            </Form.Item>
            <Form.Item
                name='password'
                label='密码'
                rules={[{ required: true, message: '姓名不能为空' }]}
            >
                <Input placeholder='请输入姓名' />
            </Form.Item>
        </Form>
    </div>
}

export default Login